<template>
    <div class="con">
        <img src="../assets/images/register1.png" alt />

        <img src="../assets/images/register2.png" alt />

        <div id="mao" style=" position: absolute;top: 300px;"></div>
        <div class="broadcast">
            <img src="../assets/images/laba.png" alt />
            目前已有
            <span>{{number}}</span>人咨询
        </div>

        <div class="info">
            <div class="form">
                <label>姓名</label>
                <input type="text" placeholder="请输入姓名" v-model="name" />
            </div>
            <div class="form">
                <label>电话</label>
                <input
                    type="text"
                    placeholder="请输入手机号"
                    pattern="[0-9]*"
                    v-model="phone"
                    oninput="if(this.value.length>11) this.value = this.value.slice(0,11);"
                />
            </div>

            <div class="form">
                <label>城市</label>
                <input type="text" placeholder="请输入您所在的城市" v-model="city" />
            </div>

            <p class="agree">
                阅读并同意
                <span @click="show=true">《个人信息授权书》</span>
            </p>
            <div class="btn">
                <button @click="send0()">立即咨询</button>
            </div>

            <a href="tel:025-66046356">
                <p class="tip">咨询热线 : 025-66046356</p>
            </a>
        </div>

        <img src="../assets/images/register3.png" alt />

        <p class="company">
            南京银土信息科技有限公司
            <br />苏ICP备17062649号
        </p>

        <div class="footer">
            <ul>
                <a href="tel:025-66046356">
                    <li class="call">
                        <img src="../assets/images/phone.png" alt />
                        咨询热线
                    </li>
                </a>
                <a href="#mao">
                    <li class="detail">
                        <img src="../assets/images/detail.png" alt />
                        了解详情
                    </li>
                </a>
            </ul>
        </div>

        <van-dialog v-model="show" title="个人信息授权书" class="dialog">
            <p>尊敬的用户，您选择使用“自动输入历史手机号”功能后，您同意本平台在法律允许的范围内，收集您的手机号码，您已知晓并同意在您下次浏览广告页面时，我们会帮您预先填写您上次输入的历史手机号，您的手机号码仅会用于在广告页面的预填充，且只有您点击提交按钮之后信息才会传递给广告主商家。</p>
        </van-dialog>

        <van-dialog v-model="codeDialog" title="手机验证" class="authCode" :beforeClose="beforeClose">
            <button @click="send()" id="yzm">发送验证码</button>
            <br />
            <input type="text" placeholder="请输入验证码" v-model="code" pattern="[0-9]*" />
        </van-dialog>
    </div>
</template>

<script>
export default {
    name: "register",
    data() {
        return {
            number: "",
            timestamp: "",
            show: false,
            name: "",
            phone: "",
            code: "",
            city: "",
            Date: "",
            codeDialog: false,
            clock: "",
            id:"",
            promotionChannelKey:62
        };
    },
    methods: {
        send0() {
            var myreg = /^[1][0-9]{10}$/;
            if (this.phone == "") {
                this.$toast("请输入手机号");
            } else if (!myreg.test(this.phone)) {
                this.$toast("请填写正确的手机号");
            } else if (this.city == "") {
                this.$toast("请输入您所在的城市");
            } else {
                this.codeDialog = true;
                setTimeout(() => {
                    this.send();
                }, 100);
            }
        },
        send() {
            var yzm = document.getElementById("yzm");

            var nums = 60;
            yzm.disabled = true; //将按钮置为不可点击
            yzm.style.opacity = "0.5";
            yzm.innerHTML = nums + "s";
            this.clock = setInterval(doLoop, 1000); //一秒执行一次

            var that = this;
            function doLoop() {
                nums--;
                if (nums > 0) {
                    yzm.innerHTML = nums + "s";
                } else {
                    clearInterval(that.clock); //清除js定时器
                    yzm.disabled = false;
                    yzm.style.opacity = "1";

                    yzm.innerHTML = "获取验证码";
                    nums = 60; //重置时间
                }
            }
            this.axios({
                method: "post",
                url: `${this.siteUrl}/app/auth/yintu/getcode.do?appid=web.2019&format=json&timestamp=${this.timestamp}`,
                data: {
                    phone: this.phone,
                    authType: 18,
                    custName: this.name,
                    city: this.city,
                    promotionChannelKey: this.promotionChannelKey,
                    regTime: this.date
                }
            })
                .then(response => {
                    if (response.data.success == 1) {
                        this.$toast(response.data.message);
                        this.id=response.data.data.id;
                    } else {
                        this.$toast(response.data.message);
                    }
                })
                .catch(error => {
                    console.log(error);
                    this.$toast("连接服务器异常");
                });
        },
        beforeClose(action, done) {
            var myreg = /^[1][0-9]{10}$/;
            if (this.code == "") {
                this.$toast("请输入验证码");
                done(false);
            } else {
                this.axios({
                    method: "post",
                    url: `${this.siteUrl}/h5/opinion/feedback/addApplyInfo.do?appid=web.2019&format=json&timestamp=${this.timestamp}`,
                    data: {
                        custName: this.name,
                        phone: this.phone,
                        authCode: this.code,
                        promotionChannelKey: this.promotionChannelKey,
                        regTime: this.date,
                        city: this.city,
                        id:this.id
                    }
                })
                    .then(response => {
                        if (response.data.success == 1) {
                            done();
                            this.$toast(response.data.message);
                            clearInterval(this.clock);
                            this.code = "";
                        } else {
                            done();
                            this.$toast(response.data.message);
                            clearInterval(this.clock);
                            this.code = "";
                        }
                    })
                    .catch(error => {
                        console.log(error);
                        this.$toast("连接服务器异常");
                    });
            }
        }
    },
    mounted() {
        this.timestamp = Date.parse(new Date());
        var str = this.timestamp + "";
        this.number = str.substring(5, 9);

        var date = new Date();
        var Y = date.getFullYear() + "-";
        var M =
            (date.getMonth() + 1 < 10
                ? "0" + (date.getMonth() + 1)
                : date.getMonth() + 1) + "-";
        var D =
            date.getDate() < 10
                ? "0" + date.getDate() + " "
                : date.getDate() + " ";
        var h =
            date.getHours() < 10
                ? "0" + date.getHours() + ":"
                : date.getHours() + ":";
        var m =
            date.getMinutes() < 10
                ? "0" + date.getMinutes() + ":"
                : date.getMinutes() + ":";
        var s =
            date.getSeconds() < 10
                ? "0" + date.getSeconds()
                : date.getSeconds();

       this.date=Y + M + D + h + m + s;


     if(this.$route.query.promotionChannelKey==undefined){
         this.promotionChannelKey=62
     }else{
        this.promotionChannelKey=Number(this.$route.query.promotionChannelKey)
     }
     
    

     
     
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.con {
    width: 100%;
    min-height: 100vh;
    background: #00a1ee;
    overflow: hidden;
}
.con img {
    width: 100%;
}
.broadcast {
    width: 100%;
    height: 35px;
    background: #1379e5;
    margin-top: -5px;
    line-height: 35px;
    text-align: center;
    font-size: 12px;
    color: #fff;
}
.broadcast img {
    width: 15px;
    vertical-align: -3px;
}
.broadcast span {
    color: #ffec00;
}
.info .form {
    width: 90%;
    height: 38px;
    border-radius: 6px;
    background: #fff;
    margin-top: 15px;
    line-height: 38px;
    margin-left: 5%;
    position: relative;
}

.info .form label {
    color: #0b94de;
    font-weight: 200;
    width: 25%;
    text-align: center;
    display: inline-block;
}

.info .form input {
    height: 38px;
    width: 70%;
}
.agree {
    width: 90%;
    margin-left: 5%;
    color: #fff;
    margin-top: 15px;
    font-weight: 200;
}

.agree span {
    color: #ffad43;
}

.btn button {
    width: 90%;
    height: 44px;
    line-height: 44px;
    text-align: center;
    color: #fff;
    border-radius: 6px;
    background: #ffad43;
    margin-top: 15px;
    margin-left: 5%;
    font-size: 16px;
}
.tip {
    text-align: center;
    color: #cde5ff;
    margin: 15px 0px;
}
.footer {
    position: fixed;
    left: 0px;
    bottom: 0px;
    width: 100%;
}
.footer ul li {
    width: 50%;
    float: left;
    text-align: center;
    height: 50px;
    line-height: 50px;
}
.footer .call {
    background: #fff;
}
.footer .call img {
    width: 20px;
    vertical-align: -5px;
}
.footer .detail img {
    width: 20px;
    vertical-align: 0px;
}
.footer .detail {
    background: #ffad43;
    color: #fff;
}
.dialog p {
    padding: 10px;
}
.company {
    text-align: center;
    color: #fff;
    margin-bottom: 60px;
}
.authCode {
    text-align: center;
}

.authCode button {
    background: transparent;
    margin-top: 20px;
    color: #ffad43;

    font-size: 14px;
}
.authCode input {
    border-bottom: 1px solid #ddd;
    margin-top: 20px;
    margin-bottom: 30px;
    height: 44px;
}
</style>

